<template>
  <div class="container">
    <main-header :actived="0" />

    <div class="waitcon" :style="{opacity: images.length && imagesLoaded === images.length ? 1:0 }">
      <!-- 归属主理人 -->
      <div class="link-belong" v-if="ParentMember!==null">
        <img v-if="ParentMember.Photo && ParentMember.Photo.indexOf('http')===-1" :src="'http://shop.jdpin.com.cn/' + ParentMember.Photo" class="person" />
        <img v-else :src="ParentMember.Photo" class="person" />
      </div>
      <!-- 广告banner -->
      <div class="banner">
        <div class="bg"></div>
        <van-swipe class="banner-s" :autoplay="3000" indicator-color="#d50721">
          <van-swipe-item 
            v-for="(image, index) in images" 
            :key="index"
            @click="goToLink(image.link)"
          >
            <!-- <img v-lazy="image" /> -->
            <img @load="bannerLoaded" :src='image.pic' />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 分类列表 -->
      <scroll-category-line 
        class="sc-index"
        :categories="categories" 
        :currentIndex="currentIndex" 
        @itemClicked="switchList" 
        type="0"
      />
      <div class="products">
        <div class="category-pic">
          <img 
            v-if="categories[currentIndex]" 
            :src='categories[currentIndex].Image' 
          />
          <div class="more" @click="goToProductList(currentIndex)">查看更多</div>
        </div>
        <div class="list">
          <div 
            class="item" 
            v-for="(item, index) in productList" 
            :key="index"
            @click="goToProduct(item.ProductId)"
          >
            <div class="img"><img :src='item.ImagePath' @error="defaultImg(defaultImgUrl)" /></div>
            <div class="name">{{item.ProductName}}</div>
            <!-- <div class="dis"></div> -->
            <div class="price">
              <h3>¥<span>{{item.MinSalePrice}}</span></h3>
              <h4 v-if="item.MinSalePrice!==item.MarketPrice">¥{{item.MarketPrice}}</h4>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动专区 -->
      <div 
        class="products active-center"
        v-if="cutPriceProduct.length || manyPriceProduct.length || limitProducts.length"
      >
        <scroll-category-line 
          class="active-switch"
          :categories="activeSorts" 
          :currentIndex="activeIndex" 
          @itemClicked="switchActive" 
          type="1"
        />
        <div class="list-outer">
          <!-- 硬核直降 -->
          <div class="list" v-if="activeIndex===0">
            <div 
              class="item" 
              v-for="(item, index) in cutPriceProduct" 
              :key="index"
              @click="goToProduct(item.ProductId)"
            >
              <div class="img"><img :src='item.ImagePath' @error="defaultImg(defaultImgUrl)" /></div>
              <div class="name">{{item.ProductName}}</div>
              <!-- <div class="dis"></div> -->
              <div class="price">
                <h3>¥<span>{{item.MinSalePrice}}</span></h3>
                <h4 v-if="item.MinSalePrice!==item.MarketPrice">¥{{item.MarketPrice}}</h4>
              </div>
            </div>
            <div v-if="cutPriceProduct.length" class="item item-more" @click="goToCutlist">
              全部
            </div>
          </div>
          <!-- 多件多折 -->
          <div class="list" v-if="activeIndex===1">
            <div 
              class="item" 
              v-for="(item, index) in manyPriceProduct" 
              :key="index"
              @click="goToProduct(item.ProductId)"
            >
              <div class="img"><img :src='item.ImagePath' @error="defaultImg(defaultImgUrl)" /></div>
              <div class="name">{{item.ProductName}}</div>
              <!-- <div class="dis"></div> -->
              <div class="price">
                <h3>¥<span>{{item.MinSalePrice}}</span></h3>
                <h4 v-if="item.MinSalePrice!==item.MarketPrice">¥{{item.MarketPrice}}</h4>
              </div>
            </div>
            <div v-if="manyPriceProduct.length" class="item item-more" @click="goToManylist">
              全部
            </div>
          </div>
          <!-- 限时秒杀 -->
          <div class="list" v-if="activeIndex===2">
            <div 
              class="item" 
              v-for="(item, index) in limitProducts" 
              :key="index"
              @click="goToProduct(item.ProductId)"
            >
              <div class="img"><img :src='item.ProductImg' @error="defaultImg(defaultImgUrl)" /></div>
              <div class="name">{{item.ProductName}}</div>
              <!-- <div class="dis"></div> -->
              <div class="price">
                <h3>¥<span>{{item.MinPrice}}</span></h3>
                <h4 v-if="item.MinPrice!==item.MarketPrice">¥{{item.MarketPrice}}</h4>
              </div>
            </div>
            <div v-if="limitProducts.length" class="item item-more" @click="goToLimitlist">
              全部
            </div>
          </div>
        </div>
      </div>
      
      <!-- 主理人专场 -->
      <div class="belong-man">
        <div
          v-for="(item, index) in topicList" :key="index"
          class="item" 
        >
          <div class="intro">
            <div class="name">{{item.Name}}</div>
            <div class="dis">{{item.TopModuleName[0]}}</div>
          </div>
          <div class="img" @click="goToDiscount(item.Id)">
            <img :src='item.TopImage' />
            <div class="more">了解更多</div>
          </div>
          <div class="topic-products">
            <div class="list">
              <div 
                class="item" 
                v-for="(itemIn, index) in item.TopicModelProduct" 
                :key="index"
                @click="goToProduct(itemIn.Id)"
              >
                <div class="img"><img :src='itemIn.Image' @error="defaultImg(defaultImgUrl)" /></div>
                <div class="name">{{itemIn.Name}}</div>
                <!-- <div class="dis"></div> -->
                <div class="price">
                  <h3>¥<span>{{itemIn.Price}}</span></h3>
                  <h4 v-if="itemIn.Price!==itemIn.MarketPrice">¥{{itemIn.MarketPrice}}</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热销推荐 -->
      <div class="topic-products recommand">
        <div class="tit">热销推荐</div>
        <div class="list">
          <div 
            class="item" 
            v-for="(itemIn, index) in recommendProduct" 
            :key="index"
            @click="goToProduct(itemIn.ProductId)"
          >
            <div class="img"><img :src='itemIn.ImagePath' @error="defaultImg(defaultImgUrl)" /></div>
            <div class="name">{{itemIn.ProductName}}</div>
            <div class="price">
              <h3>¥<span>{{itemIn.MinSalePrice}}</span></h3>
              <h4 v-if="itemIn.MinSalePrice!==itemIn.MarketPrice">¥{{itemIn.MinSalePrice}}</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="bind-tips" v-if="bindShow">
        <p>
          您好，<br/>
          请绑定银行卡，避免分佣无法到账！
        </p>
      </div>
    
      <!-- 页尾 -->
      <main-footer  />
    </div>

  </div>
</template>

<script>
import MainHeader from 'components/content/MainHeader'
import MainFooter from 'components/content/MainFooter'
import ScrollCategoryLine from 'components/content/ScrollCategoryIndex'
import { defaultImg, getQueryString, removeByObjValue } from '../../utils/'
import { 
  getCategories, 
  getShopCategories,
  getAppIndex, 
  getLimitTimeBuy, 
  getPinList,
  getTopicList,
  getTopicDetail,
} from '../../network/best'
import { getUserDetail } from '../../network/user'
import { getProductList, getActiveProductList } from '../../network/productList'
import { getBankCard } from '../../network/belong'
import { Toast } from 'vant'
import { format } from 'date-fns'

export default {
  name: 'Best',
  components: {
    MainHeader,
    MainFooter,
    ScrollCategoryLine,
  },
  data(){
    return {
      userKey: localStorage.getItem("userKey"),
      isISP: localStorage.getItem("isISP") === 'true',
      isBelongMan: localStorage.getItem("isBelongMan") === 'true',
      defaultImgUrl: require('../../assets/img/recommand-none.png'),
      keywords: '',
      categories: [
        // {Id: 1, Name: '新品'},
        // {Id: 2, Name: '上装'},
        // {Id: 3, Name: '下装'},
        // {Id: 4, Name: '配件'},
        // {Id: 5, Name: '瑜伽'},
        // {Id: 6, Name: '跑步'}
      ],
      currentIndex: 0,
      activeSorts: [
        {id: 0, Name: '硬核直降'}, 
        {id: 1, Name: '多件多折'}, 
        {id: 2, Name: '限时秒杀'}, 
      ],
      cutPriceProduct: [],
      manyPriceProduct: [],
      recommendProduct: [],
      activeIndex: 0,
      limitProducts: [],
      limitProductsToday: [],
      groupProducts: [],
      images: [
        // require('../../assets/img/banner-1.jpg'),
        // require('../../assets/img/banner-1.jpg')
      ],
      imagesLoaded: 0,
      topicList: [],
      productList: [],
      ParentMember: JSON.parse(localStorage.getItem('ParentMember')),
      limitSwiperIndex: 0,
      bindShow: false,
    }
  },
  async mounted() {
    
    // 登录角色:城市运营商 -> 直接跳转到专属界面
    if(JSON.parse(localStorage.getItem('isISP'))){
      this.$router.push('belongApply')
    }

    // 登录角色:运营商(除总账号)或主理人 -> 未绑银行卡提示
    if( this.userKey && ( this.isISP || this.isBelongMan ) && localStorage.getItem('userId')!=='699'  ){
      if(sessionStorage.getItem('bindIdCardMsg') !== 'true'){
        this.getBankCard((isBindIdcard) => {
          if(!isBindIdcard){
            this.bindShow = true
            setTimeout(() => {
              sessionStorage.setItem('bindIdCardMsg', true)
              this.$router.push('benefitWithdraw')
            }, 3000);
          }
        })
      }
    }

    // 获取上一级用户信息
    setTimeout(() => {
      this.ParentMember = JSON.parse(localStorage.getItem('ParentMember'))
    }, 2000)

    // ==================== 分割线 ====================
    // 获取首页数据 [轮播图]
    await this.getAppIndex()

    // 获取所有产品分类
    this.getCategories()

    // 获取秒杀列表
    this.getLimitTimeBuy()

    // 获取首页专题列表
    this.getTopicList()

    // 获取硬核直降、多件多折商品列表
    this.getActiveProductList()
    
  },
  methods: {
    // 获取银行卡信息
    getBankCard(cb){
      getBankCard(list => {
        console.log(!!list.length)
        cb && cb(!!list.length)
      })
    },

    bannerLoaded(){
      this.imagesLoaded++
    },
    goToCutlist(){
      this.$router.push({
        path: '/activesale?activeSort=0',
      })
    },
    goToManylist(){
      this.$router.push({
        path: '/activesale?activeSort=1',
      })
    },
    goToLimitlist(){
      this.$router.push({
        path: '/activesale?activeSort=2',
      })
    },
    goToSale(){
      this.$router.push('activesale')
    },
    limitMore(){
      this.$router.push('activesale?activeSort=2')
    },
    limitChanged(index){
      this.limitSwiperIndex = index
    },
    getAppIndex(){
      return new Promise(resolve => {
        getAppIndex(res => {
          this.images = res.AdImg
          resolve()
        })
      })
    },
    getCategories(){
      getCategories(list => {
        list.map(item => {
          item.sid = 0
          return item
        })
        this.categories = list

        // 获取场景分类
        getShopCategories(list => {
          list = list.filter(item => item.Id != 350)
          list.map(item => {
            item.sid = 1
            return item
          })
          this.categories = [...this.categories, ...list]

          this.getProductList(list[0].Id, list[0].sid)
        })

      })
    },
    getLimitTimeBuy(){
      getLimitTimeBuy(list => {
        list = list.map(item => {
          let startDate = format(new Date(item.StartDate), 'yyyy-MM-dd')
          let nowDate = format(new Date(), 'yyyy-MM-dd')

          // if(startDate === nowDate){
            let nowHour = format(new Date(item.StartDate), 'HH:mm')
            item.TodayHour = nowHour
            let startDateIphone = item.StartDate.split('T').join(' ')
                                  .replace(/-/g,'/')
            let isTimePast = new Date(startDateIphone).getTime() <
                              new Date().getTime()
            item.status = isTimePast ? '疯抢中':'即将开始'
          // }
          
          return item
        })
        this.limitProducts = list
        this.limitProductsToday = list.filter(item => {
          return item.TodayHour
        })

        if(!this.limitProducts.length){
          this.activeSorts.map(item => {
            item.id === 2
          })
          removeByObjValue(this.activeSorts, 'id', 2)
        }
      })
    },
    getActiveProductList(){
      getActiveProductList({
        UserKey: this.userKey
      }, res => {
        res.cutPriceProduct = res.cutPriceProduct.map((item, index) => {
          item.MinSalePrice = Number(item.MinSalePrice).toFixed(0)
          item.MarketPrice = Number(item.MarketPrice).toFixed(0)
          return item
        })

        res.manyPriceProduct = res.manyPriceProduct.map((item, index) => {
          item.MinSalePrice = Number(item.MinSalePrice).toFixed(0)
          item.MarketPrice = Number(item.MarketPrice).toFixed(0)
          return item
        })
        // res.recommendProduct = res.recommendProduct.map((item, index) => {
        //   item.ImagePath = item.ImagePath.split('350.').join('150.')
        //   return item
        // })
        
        this.cutPriceProduct = res.cutPriceProduct
        this.manyPriceProduct = res.manyPriceProduct
        this.recommendProduct = res.recommendProduct

        if(!this.cutPriceProduct.length){
          removeByObjValue(this.activeSorts, 'id', 0)
        }
        if(!this.manyPriceProduct.length){
          removeByObjValue(this.activeSorts, 'id', 1)
        }
      })
    },
    getTopicList(){
      getTopicList(list => {
        this.topicList = list

        list.map((item, index) => {
          getTopicDetail({
            id: item.Id
          }, topic => {
            let products = topic.TopicModule[0].TopicModelProduct
            if(products.length>6){
              products = products.reverse().splice(0, 6)
            }
            // products.map(itemIn => {
            //   itemIn.Image = itemIn.Image.split('350.').join('150.')
            //   return itemIn
            // })
            this.topicList[index].TopicModelProduct = products
          })
        })
      })
    },
    getProductList(cid, sid){
      let requestData = {
        pageNo: 1,
        pageSize:10,
        cid,
        sid,
      }
      getProductList(requestData, list => {
        list = list.map((item, index) => {
          item.SalePrice = item.SalePrice.toFixed(0)
          item.MinSalePrice = item.MinSalePrice.toFixed(0)
          item.MarketPrice = item.MarketPrice.toFixed(0)
          // item.ImagePath = item.ImagePath.split('350.').join('100.')
          return item
        })
        this.productList = list.splice(0, 6)
      })
    },
    switchList(obj){
      this.currentIndex = obj.index
      let cid = this.categories[this.currentIndex].Id
      let sid = this.categories[this.currentIndex].sid
      this.getProductList(cid, sid)
    },
    switchActive(obj){
      this.activeIndex = obj.item.id
    },
    goToLink(link){
      window.location.href = link
    },
    defaultImg(imgUrl){
      defaultImg(imgUrl)
    },
    goToProductList(index){
      let cid = this.categories[index].Id
      let sid = this.categories[index].sid
      this.$router.push({
        path: '/productList',
        query: {
          cid,
          sid,
        }
      })
    },
    goToProduct(id, pinId){
      this.$router.push({
        path: '/product',
        query: {
          id,
          pinId,
        }
      })
    },
    goToProducts(){
      this.$router.push('/productList')
    },
    goToDiscount(id){
      this.$router.push({
        path: '/discount',
        query: {
          id
        }
      })
    },
    goToUserLife(memberId){
      this.$router.push({
        path: '/life',
        query: {
          action: 'you',
          id: memberId
        }
      })
    },
  },
}
</script>

<style>
body{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
</style>
<style scoped>
.waitcon{
  transition: all .6s;
}
.search{
  padding: 10px;
  background-color: #000000;
}
.search-area{
  display: flex;
  justify-content: stretch;
  height: 36px;
  border-radius: 36px;
  overflow: hidden;
  background-color: #ffffff;
}
.search-area input{
  flex-grow: 1;
  text-indent: 15px;
}
.search-area button{
  width: 100px;
  margin: 1px;
  height: 34px;
  border-radius: 34px;
  color: #ffffff;
  background-color: #000000;
}
.link-belong{
  position: fixed;
  bottom: 30px;
  right: 0;
  border-radius: 50px 0 0 50px;
  background-color: #fff;
  z-index: 999;
  padding: 18px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
}
.link-belong img.person{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #f7f7f7;
  overflow: hidden;
}
.banner{
  position: relative;
  padding: 10px 10px 0 10px;
  /* min-height: 200px; */
}
.banner .bg{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: #000;
  z-index: 1;
}
.banner .banner-s{
  border-radius: 5px;
  z-index: 9;
}
.banner img{
  width: 100%;
  overflow: hidden;
}
.time-limit{
  margin: 0 10px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #000000;
}
.time-limit .time{
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  overflow: hidden;
}
.time-limit .time h3{
  width: 40px;
  text-align: center;
  padding: 0 15px 0 12px;
}
.time-limit .time .stages{
  position: relative;
  flex-grow: 1;
  display: flex;
  padding: 0 10px;
}
.time-limit .time .stages:before{
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  width: 1px;
  height: 25px;
  background-color: #ffffff;
  content: '';
}
.time-limit .time .stages p{
  color: #999;
  width: 33.33%;
  text-align: center;
}
.time-limit .time .stages p.cur{
  color: #ffffff;
}
.time-limit .time .stages p i{
  font-size: 18px;
}
.time-limit .time .stages p span{
  display: block;
  font-size: 12px;
}
.time-limit .time .more{
  position: relative;
  padding-right: 20px;
  font-size: 12px;
}
.time-limit .time .more:after{
  display: block;
  position: absolute;
  right: 12px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: '';
  transform: rotate(45deg)
}
.time-limit .product{
  background-color: #ffffff;
}
.time-limit .product .item{
  display: flex;
  justify-content: space-between;
  padding: 15px 17px;
  box-sizing: border-box;
}
.time-limit .product .item img{
  width: 118px;
  height: 118px;
  border-radius: 4px;
  flex-shrink: 0;
}
.time-limit .product .item .intro{
  flex-grow: 1;
  padding-left: 10px;
}
.time-limit .product .item .intro .dis{
  height: 20px;
}
.time-limit .product .item .intro .status{
  text-align: right;
  line-height: 1;
  font-size: 12px;
  color: #8c8c8c;
}
.time-limit .product .item .name{
  font-size: 16px;
  line-height: 1.1;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.time-limit .product .item .dis{
  font-size: 12px;
  color: #8c8c8c;
  padding: 10px 0;
}
.time-limit .product .item .percent{
  display: flex;
  align-items: center;
}
.time-limit .product .item .percent i{
  position: relative;
  width: 100px;
  height: 8px;
  border-radius: 3px;
  background-color: #fd919f;
  overflow: hidden;
}
.time-limit .product .item .percent i em{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30%;
  display: block;
  border-radius: 3px;
  background-color: #d50721;
}
.time-limit .product .item .percent span{
  font-size: 12px;
  color: #8c8c8c;
  padding-left: 10px;
}
.time-limit .product .item .price{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.time-limit .product .item .price h4{
  color: #d50721;
}
.time-limit .product .item .price h4 span{
  font-size: 18px;
  padding-left: 5px;
}
.time-limit .product .item .price h5{
  flex-grow: 1;
  font-size: 12px;
  color: #8c8c8c;
  padding-left: 10px;
  text-decoration: line-through;
}
.time-limit .product .item .price i{
  padding: 0 12px;
  border-radius: 20px;
  line-height: 24px;
  color: #ffffff;
  font-size: 12px;
  background-color: #000000;
}
.ta-vip{
  margin: 10px;
  border-radius: 5px;
  padding: 15px 17px;
  background-color: #ffffff;
}
.ta-vip .tit{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ta-vip .tit h3{
  font-size: 16px;
  padding-right: 20px;
}
.ta-vip .tit h4{
  color: #8c8c8c;
  font-size: 12px;
}
.ta-vip .navs{
  display: flex;
  justify-content: space-between;
}
.ta-vip .navs .item{
  width: 50%;
  overflow: hidden;
  position: relative;
  margin-right: 12px;
}
.ta-vip .navs .item:nth-child(2n){
  margin-left: 12px;
  margin-right: 0;
}
.ta-vip .navs .item img{
  width: 100%;
  border-radius: 5px;
}
.ta-vip .navs .item .txt{
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 10px;
  color: #ffffff;
  background-color: #000000;
  border-radius: 30px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-vip .navs .item .amount{
  position: absolute;
  top: 10px;
  left: 0;
  width: 55px;
  padding-right: 1px;
  line-height: 26px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 0 30px 30px 0;
  background-color: #d50721;
}
.ta-vip .navs .item .pin-txt{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  background-color: rgba(0, 0, 0, .5);
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0 0 5px 5px;
}
.belong-man{
  margin: 20px 10px 10px 10px;
}
.belong-man .item{
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}
.belong-man .item .img{
  position: relative;
  margin-bottom: 6px;
}
.belong-man .item .more{
  position: absolute;
  right: 14px;
  bottom: 9px;
  width: 94px;
  text-align: center;
  line-height: 32px;
  border-radius: 32px;
  color: #fff;
  background-color: #000;
  font-size: 12px;
  box-sizing: border-box;
  padding-right: 10px;
}
.belong-man .item .more:after{
  position: absolute;
  right: 18px;
  top: 12px;
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
.belong-man .item .label{
  position: absolute;
  left: 0;
  top: 20px;
  width: 100px;
  line-height: 35px;
  font-size: 12px;
  border-radius: 0 30px 30px 0;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
.belong-man .item img{
  width: 100%;
  border-radius: 5px;
}
.belong-man .item .intro{
  padding: 10px 0;
}
.belong-man .item .intro .name{
  font-size: 18px;
  font-weight: bold;
}
.belong-man .item .intro .dis{
  font-size: 14px;
  line-height: 35px;
}
.belong-man .item .intro .more{
  width: 125px;
  font-size: 12px;
  line-height: 30px;
  background-color: #ececec;
  text-align: center;
}
.recommend{
  margin: 10px;
}
.recommend .tit{
  padding-left: 15px;
  line-height: 30px;
  font-size: 16px;
  padding-bottom: 5px;
}
.recommend .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recommend .list .item{
  padding-right: 5px;
  width: 50%;
  box-sizing: border-box;
}
.recommend .list .item:nth-child(2n){
  padding-right: 0;
  padding-left: 5px;
}
.recommend .list .item .img{
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.recommend .list .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.recommend .list .item .name{
  font-size: 14px;
  height: 45px;
  margin-bottom: 2px;
  padding: 8px 10px 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.recommend .list .item .dis{
  font-size: 14px;
  color: #8c8c8c;
  padding: 0 5px 5px 5px;
}
.recommend .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 3px 5px 20px 5px;
}
.recommend .list .item .price h3{
  color: #d50721;
  padding-right: 15px;
}
.recommend .list .item .price h3 span{
  font-size: 18px;
  padding: 3px;
}
.recommend .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}
.products{
  padding: 0 10px 0 10px;
}
.products .category-pic{
  margin-bottom: 6px;
  position: relative;
}
.products .category-pic .more{
  position: absolute;
  right: 14px;
  bottom: 9px;
  width: 94px;
  text-align: center;
  line-height: 32px;
  border-radius: 32px;
  color: #fff;
  background-color: #000;
  font-size: 12px;
  box-sizing: border-box;
  padding-right: 10px;
}
.products .category-pic .more:after{
  position: absolute;
  right: 18px;
  top: 12px;
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
.products .category-pic img{
  width: 100%;
  border-radius: 6px;
}
.products .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.products .list .item{
  width: 32%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}
.products .list .item .img{
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.products .list .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 0 0;
}
.products .list .item .name{
  font-size: 12px;
  height: 40px;
  margin-bottom: 2px;
  padding: 8px 8px 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.products .list .item .dis{
  font-size: 12px;
  color: #8c8c8c;
  padding: 0 8px 5px 8px;
}
.products .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 10px 8px 12px 8px;
}
.products .list .item .price h3{
  color: #000;
  padding-right: 15px;
}
.products .list .item .price h3 span{
  font-size: 14px;
  padding: 3px;
  font-weight: bold;
}
.products .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}
.activesale{
  padding: 0 10px;
}
.activesale img{
  width: 100%;
  border-radius: 6px;
}
.topic-products .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.topic-products .list .item{
  width: 49%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}
.topic-products .list .item .img{
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.topic-products .list .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 0 0;
}
.topic-products .list .item .name{
  font-size: 12px;
  height: 40px;
  margin-bottom: 2px;
  padding: 8px 8px 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.topic-products .list .item .dis{
  font-size: 12px;
  color: #8c8c8c;
  padding: 0 8px 5px 8px;
}
.topic-products .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 10px 8px 12px 8px;
}
.topic-products .list .item .price h3{
  color: #000;
  padding-right: 15px;
}
.topic-products .list .item .price h3 span{
  font-size: 16px;
  padding: 3px;
  font-weight: bold;
}
.topic-products .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}

.list-outer{
  width: 100%;
  overflow: auto;
  margin-top: 18px;
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.active-center{
  overflow: hidden;
  padding: 0;
}
.active-center .list{
  flex-wrap: nowrap;
  padding: 0 10px;
  justify-content: flex-start;
}
.active-center .list .item{
  flex-shrink: 0;
  margin-right: 2%;
}
.recommand{
  padding: 0 10px;
}
.recommand .tit{
  font-size: 18px;
  font-weight: bold;
  line-height: 3;
}
.active-center .list .item-more{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.bind-tips{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 40%;
  bottom: 40%;
  padding-bottom: 10px;
  left: 8px;
  right: 8px;
  border-radius: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, .85);
  font-size: 18px;
  z-index: 999;
}
.bind-tips p{
  text-align: left;
  line-height: 35px;
}
</style>
